<!-- 申请人 && 我的名片 -->
<template>
  <view class="bgf mt-15">
    <view class="linh-44 px-15 fz-16 fw-7 borderBottom" v-if="title">{{ title }}</view>
    <!-- 会员显示我的名片 -->

    <view class="pa-15 cardBox">
      <!-- <view class="tags bg1">联盟</view>
            <view class="tags bg2">本会</view>
            <view class="tags bg3">合作</view> -->
      <view class="disFlx">
        <TImage
          :src="contactInfo?.leadingAvatar"
          width="140rpx"
          height="160rpx"
          border-radius="10rpx"
          error-img-type="person"
        />
        <view class="pl-12 fz-14 disFlx rightBox">
          <view class="disFlxAC">
            <view class="fz-16 fw-7 ov-1">{{ contactInfo?.leadingName }}</view>
            <view v-if="contactInfo?.leadingSocialPosition" class="fz-10 position">
              {{ contactInfo?.leadingSocialPosition }}
            </view>
          </view>
          <template v-if="isMember">
            <view>
              <text>{{ contactInfo?.companyName }}</text>
              <!-- <text
                v-if="contactInfo?.applyType === ApplyTypeEnum.UNIT"
                class="ali-icon ml-4 color1"
              >
                &#xe661;
              </text> -->
              <image
                v-if="contactInfo?.applyType === ApplyTypeEnum.UNIT"
                class="member-icon ml-4"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
              />
            </view>
            <scroll-view
              :enhanced="true"
              :show-scrollbar="false"
              scroll-x
              enable-flex
              :style="{
                width: '500rpx',
              }"
            >
              <view class="disFlx tagBox">
                <template v-for="(tag, i) in contactInfo?.companyMainBusinesList" :key="i">
                  <text class="tagTitle ov1">{{ tag }}</text>
                </template>
              </view>
            </scroll-view>
          </template>
          <template v-else>
            <view class="color4">
              <text>公司名称未填写</text>
              <text class="pl-15">职称未填写</text>
            </view>
            <view class="tagBox"></view>
          </template>
        </view>
      </view>
      <view class="disFlxJS fz-12 pt-15" v-if="isMember">
        <view class="color2">
          <text>{{ contactInfo?.orgTenantName }}</text>
          <text class="ali-icon ml-4">&#xe66b;</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import { type PropType } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import type { MemberContactsVo } from '@/api/order/types';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';

  const props = defineProps({
    contactInfo: Object as PropType<MemberContactsVo>,
    isMember: propTypes.bool.def(true),
    title: propTypes.string.def(''),
  });
</script>
<style lang="scss" scoped>
  .color1 {
    color: #ffa944;
  }

  .color2 {
    color: #3aa5ff;
  }

  .color3 {
    color: #aaabab;
  }

  .color4 {
    color: #2878ff;
  }

  .cardBox {
    position: relative;
    overflow: hidden;

    .tags {
      position: absolute;
      left: 0;
      top: 0;
      text-align: center;
      color: #ffffff;
      font-size: 24rpx;
      width: 200rpx;
      height: 40rpx;
      line-height: 40rpx;
      z-index: 99;
      transform: rotate(-45deg) translateX(-28%) translateY(-90%);
    }

    .tags.bg1 {
      background-color: #2878ff;
    }

    .tags.bg2 {
      background-color: #ffa944;
    }

    .tags.bg3 {
      background-color: #f68181;
    }
  }

  .rightBox {
    flex-direction: column;
    justify-content: space-between;
  }

  .member-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 8rpx;
  }

  .position {
    height: 32rpx;
    line-height: 32rpx;
    background-color: #10d1dd;
    padding: 0 16rpx;
    border-radius: 10rpx;
    color: #ffffff;
    margin-left: 30rpx;
    flex-shrink: 0;
  }

  .phoneBox {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding-left: 30rpx;
  }

  .tagBox {
    height: 40rpx;
    overflow: hidden;
    flex-wrap: wrap;

    .tagTitle {
      height: 36rpx;
      line-height: 36rpx;
      padding: 0 14rpx;
      background-color: #f5f5f5;
      border-radius: 72rpx;
      border: solid 1px #dddddd;
      color: #808080;
      font-size: 24rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
      max-width: 40%;
    }
  }
</style>
